<template>
  <div class="user">
    <UserInfo class="left"></UserInfo>
    <div class="middle">
      <get-moments :moments="moments"></get-moments>
    </div>
    <div class="right">其他</div>
  </div>
</template>
<script setup>
import UserInfo from "../../components/user/UserInfo.vue";
import GetMoments from "@/components/Moment/GetMoments";
let moments = [
  {
    id: "23333",
    avatar: "",
    authorId: "0001",
    username: "喵喵喵喵喵",
    content:
      "我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？我是谁？我在哪？",
    likeCount: 0,
    dateTime: "2021/9/25 22:22",
    img: ["", ""],
    code: "23333",
  },
  {
    id: "23332323",
    avatar:
      "https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=d4eb1ea65143fbf2c579ae25804ee6b8/6f061d950a7b02086943044f60d9f2d3562cc891.jpg",
    username: "谁？",
    content:
      "texttexttexttexttexttexttextt exttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext",
    likeCount: 0,
    dateTime: "2021/9/25 22:22",
    imgList: [
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    ],
    code: "",
  },
];
</script>
<style lang="scss" scoped>
.user {
  color: #fff;
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .middle,
  .left,
  .right {
    display: flex;
    flex-direction: column;
  }
  .left,
  .right {
    border-radius: 10px;
    width: 20%;
    background: #fff;
  }
  .left {
    height: 200px;
  }
  .right {
    height: 200px;
  }
  .middle {
    margin: 0 20px;
    width: 50%;
    background: brown;
    .dynamic-list {
      background-color: darkorchid;
      margin: 0 10px;
      .dynamic-item {
        background-color: blue;
      }
    }
  }
}
</style>
